/**
 * @name Header
 * @author darcrand
 * @desc
 */

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react'
import { Avatar } from '@/components'
import initBackground from '@/utils/linear-animate'

import styles from './styles.module.less'

@withRouter
@inject('UserStore')
@observer
class Header extends Component {
  refHeader = React.createRef()
  componentDidMount() {
    initBackground(this.refHeader.current)
  }
  render() {
    return (
      <div ref={this.refHeader} className={styles.container} onClick={() => this.props.history.replace('/entry')}>
        <Avatar title="user settings" src={this.props.UserStore.info.avatar} />

        <span className={styles.name}>{this.props.UserStore.info.name || ''}</span>
      </div>
    )
  }
}

export default Header
